<%@page import="cn.edu.cuit.elena.web.service.UserManagementSvt"%>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
    String path = request.getContextPath();
			String basePath = request.getScheme() + "://"
					+ request.getServerName() + ":" + request.getServerPort()
					+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<head>
<base href="<%=basePath%>">
<title>user_management</title>
<link rel="stylesheet" type="text/css"
	href="js/ext/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="style/mystyle.css" />
<script type="text/javascript" src="js/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="js/ext/ext-all.js"></script>
<script type="text/javascript" src="js/ext/examples/ux/ColumnNodeUI.js"></script>
<script>
	Ext.onReady(function() {

		/***********************************************
			              Text Fields
		 ***********************************************/
		 
		 var dc = new Ext.form.ComboBox({
			　	triggerAction:'all',
　				mode:'local',
				id:'database',//////////////////////////////////////////////////////////// vender
				fieldLabel : '用户组',
				name : 'name',
				xtype : 'combo',
				width:300,
				store : new Ext.data.SimpleStore({
					fields : ['text', 'value'],
					data : [['User','User'],
							['DBA','DBA'],
							['Admin','Admin']
							]
				// from states.js  
				}),
				valueField:'value',
　				displayField:'text'
			});
			
							 var gendercombo = new Ext.form.ComboBox({
			　	triggerAction:'all',
　				mode:'local',
				id:'database',//////////////////////////////////////////////////////////// vender
				fieldLabel : '性别',
				name : 'name',
				xtype : 'combo',
				width:300,
				store : new Ext.data.SimpleStore({
					fields : ['text', 'value'],
					data : [['MR','MR'],
							['MISS','MISS']
							]
				// from states.js  
				}),
				valueField:'value',
　				displayField:'text'
			});

		var tusername = new Ext.form.TextField({
			fieldLabel : '用户名',
			name : 'useranme'
		});
		var tgender = gendercombo;
		
		var tcomments = new Ext.form.TextArea({
			fieldLabel : '备注',
			name : 'comments'
		});
		var tpassword = new Ext.form.TextField({
			fieldLabel:'密码',
			name:'password'
		});
		var tusergroup = dc;
		
		var tcatelog = new Ext.form.TextField({
			fieldLabel : 'User Group',
			name : 'usergroup'
		});
		var tprivilege = new Ext.form.TextField({
			fieldLabel : 'Privilege',
			name : 'privilege'
		});
		

		/***********************************************
			              Main
		 ***********************************************/
		
		var tree=new Ext.tree.TreeNode({text:'用户组'});            
            var node1=new Ext.tree.TreeNode({text:'普通用户'});
            var node3=new Ext.tree.TreeNode({text:'DBA'});
            var node2=new Ext.tree.TreeNode({text:'系统管理员'});  
                    
            tree.appendChild(node1);
            tree.appendChild(node3); 
            tree.appendChild(node2);
		
		
		 groupPanel = new Ext.tree.TreePanel({
			title : 'User Group',
			region : 'center',
			frame : true,
			margins : '5 5 0 5',
			autoScroll : true,
			//bodyStyle:'background:#f1f1f1',
			//html:'PRIVILEGE PANEL, CREATE A PRIVLIEGE AND THEN CHOISE A MODULE OR JUST WRITE A URL TO THIS PRIVILEGE',
			height : 300,
			width : 400,
			loader : new Ext.tree.TreeLoader({
				dataUrl : 'usermanagement.svt?kind=group'
			}),
			root :tree
		});
		
		
		
		
		
		
		
		
		
		


		var proxy = new Ext.data.HttpProxy({
			url : 'usermanagement.svt?kind=user'
		});
		//定义reader
		var reader = new Ext.data.JsonReader({}, [{
			name : 'username'
		}, {
			name : 'gender'
		}, {
			name : 'usergroup'
		}, {
			name : 'comments'
		}]);
		//构建Store   
		var store = new Ext.data.Store({
			proxy : proxy,
			reader : reader
		});
		//载入
		store.load();

		var userPanel = new Ext.grid.GridPanel({
			store : store,
			id:'users',
			title : "用户",
			region : 'west',
			margins : '5 0 5 5',
			width : 400,
			columns : [{
				id : 'username',
				header : '用户名',
				width : 120,
				sortable : true,
				dataIndex : 'username',
				columnIndex : 'username'
			}
// 			, {
// 				header : 'gender',
// 				width : 100,
// 				sortable : true,
// 				dataIndex : 'gender',
// 				columnIndex : 'gender'
// 			}
			, {
				header : '用户组',
				width : 120,
				sortable : true,
				dataIndex : 'usergroup',
				columnIndex : 'usergroup'
			}, {
				header : '备注',
				width : 150,
				sortable : true,
				dataIndex : 'comments',
				columnIndex : 'comments'
			}]
		});

		var editPanel = new Ext.FormPanel({
			id : 'editPanel',
			region : 'east',
			margins : '5 5 5 5',
			//bodyStyle:'background:#f1f1f1',
			width : 380,
			id : 'company-form',
			frame : true,
			labelAlign : 'left',
			title : '用户详情',
			/////////////////////////////////////////////////////////////////////////Buttons
			tbar : [
					new Ext.Button({
						text : '添加用户',
						width : 65,
						frame : true,
						height : 50,
						cls : "cssButton",
						autoShow : true,
						handler : function() {
if(tusername.getValue()==""||tpassword.getValue()==""){
	Ext.MessageBox.alert("Prompt","Please input user name and password");
	return;
}
							var requestConfig = {
								url : 'usermanagement.svt?kind=adduser',
								params : {
									username : tusername.getValue(),
									gender : tgender.getValue(),
									usergroup: tusergroup.getValue(),
									comments : tcomments.getValue(),
									password : tpassword.getValue()
								},
								callback : function(option, success, response) {
									if(response.responseText=="1"){
										Ext.MessageBox.alert("Prompt","Add user completed.");
										Ext.getCmp("users").getStore().reload();
									}else{
										Ext.MessageBox.alert("Prompt","Add user failed.");
									}
								}
							}
							Ext.Ajax.request(requestConfig);

						}
					}), new Ext.Button({
						text : '更新用户',
						width : 65,
						frame : true,
						height : 50,
						handler : function() {
							var requestConfig = {
								url : 'usermanagement.svt?kind=updateuser',
								params : {
									username : tusername.getValue(),
									gender : tgender.getValue(),
									usergroup: tusergroup.getValue(),
									comments : tcomments.getValue(),
									password : tpassword.getValue()
								},
								callback : function(option, success, response) {
									var msg = [success, option.customer,
											response.responseText];
											userPanel.getStore().reload()
// 									alert(msg);
									
								}
							}
							Ext.Ajax.request(requestConfig);
						}
					}), new Ext.Button({
						text : '删除用户',
						width : 65,
						frame : true,
						height : 50,
						handler : function() {
							var requestConfig = {
								url : 'usermanagement.svt?kind=deleteuser',
								params : {
									username : tusername.getValue(),
									gender : tgender.getValue(),
									usergroup: tusergroup.getValue(),
									comments : tcomments.getValue()
								},
								callback : function(option, success, response) {
									var msg = [success, option.customer,
											response.responseText];
											userPanel.getStore().reload()
								}
							}
							Ext.Ajax.request(requestConfig);
						}
					})
					/*, new Ext.Button({
						text : 'Add Group',
						width : 65,
						frame : true,
						height : 50,
						handler : function() {
							alert("fuck");
							var requestConfig = {
								url : 'usermanagement.svt?kind=addusergroup',
								params : {
								
								},
								callback : function(option, success, response) {
									var msg = [success, option.customer,
											response.responseText];
									alert(msg);
								}
							}
							Ext.Ajax.request(requestConfig);
						}
					}), new Ext.Button({
						text : 'Delete Group',
						width : 65,
						frame : true,
						height : 50,
						handler : function() {
// 							alert("fuck");
							var requestConfig = {
								url : 'usermanagement.svt?kind=deleteusergroup',
								params : {
									//////////////////TODO get value from TREE
								},
								callback : function(option, success, response) {
									var msg = [success, option.customer,
											response.responseText];
								}
							}
							Ext.Ajax.request(requestConfig);
						}
					})
					*/],
			items : [
					{
						columnWidth : 0.4,
						xtype : 'fieldset',
						labelWidth : 90,
						defaults : {
							width : 140,
							border : false
						}, // Default config options for child items
						defaultType : 'textfield',
						autoHeight : true,
						bodyStyle : Ext.isIE
								? 'padding:0 0 5px 15px;'
								: 'padding:10px 15px;',
						border : false,
						style : {
							"margin-left" : "10px", // when you add custom margin in IE 6...
							"margin-right" : Ext.isIE6 ? (Ext.isStrict
									? "-10px"
									: "-13px") : "0" // you have to adjust for it somewhere else
						},
						items : [tusername, tpassword,tusergroup, tcomments]
					}]
		});

		var viewport = new Ext.Viewport({
			layout : 'border',
			items : [userPanel, groupPanel, editPanel]
		});

		/***********************************************
			              Listeners
		 ***********************************************/
		userPanel.addListener('cellclick', cellclick);

		function cellclick(grid, rowIndex, columnIndex, e) {
			var record = grid.getStore().getAt(rowIndex); //Get the Record   
			var selectRows = grid.getSelectionModel().getSelections();
			var username = selectRows[0].get("username");
			var gender = selectRows[0].get("gender");
			var usergroup = selectRows[0].get("usergroup");
			var comments = selectRows[0].get("comments");
		
			tusername.setValue(username);
			tgender.setValue(gender);
			tusergroup.setValue(usergroup);
			tcomments.setValue(comments);
			tpassword.setValue("");

			// 			Ext.MessageBox.alert('show', '当前选中的数据是' + username + gender
			// 					+ usergroup + comments);
		}
	});
</script>
</head>
<body>
</body>
</html>
